<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="expenseReq.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          expenseReq.pageIndex = 1
          getCaseExpenses()
        "
      >
        搜索
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-row :gutter="10">
          <el-col
            :span="4"
            v-for="(item, index) in expenseRes.Items"
            :key="index"
          >
            <el-card style="position: relative; height: 280px; overflow: auto">
              <div
                style="
                  position: absolute;
                  bottom: 10px;
                  right: 10px;
                  z-index: 1;
                "
              >
                <el-button
                  icon="el-icon-search"
                  type="text"
                  title="查看报销流程"
                  @click="toForm(item.CEX_FormID)"
                ></el-button>
                <el-button
                  icon="el-icon-delete"
                  type="text"
                  title="删除"
                  @click="deleteCaseExpense(item.CEX_ID)"
                ></el-button>
              </div>

              <el-image
                style="height: 150px; width: 100%"
                fit="fill"
                v-if="item.FL_SrcPath"
                :src="fileURL + item.FL_SrcPath"
                :preview-src-list="[fileURL + item.FL_SrcPath]"
              ></el-image>
              <div>
                <el-popover placement="top-start" width="300" trigger="hover">
                  <p>{{ item.FL_Name }}</p>
                  <p>编号:{{ item.IN_No }}【{{ item.IN_ID }}】</p>
                  <p>发票金额：{{ item.IN_Fee }}</p>
                  <p>开票日期：{{ item.IN_DealDate | formatDate }}</p>
                  <p>录入日期：{{ item.IN_CreateTime | formatDate }}</p>
                  <p>地址：{{ item.IN_AreaDesc }}</p>
                  <p>报销时间：{{ item.IN_AreaDesc }}</p>
                  <p>报销备注：{{ item.CEX_ExpenseTime | formatTime }}</p>
                  <el-link
                    slot="reference"
                    style="color: blue"
                    @click="toForm(item.CEX_FormID)"
                  >
                    {{ item.INTY_EnumTxt ? `【${item.INTY_EnumTxt}】` : '' }}

                    <span style="margin-left: 5px">
                      {{ item.ExpenseUserName }}
                    </span>
                  </el-link>
                </el-popover>
                <!-- <span>
                  {{ item.FLOW_Name ? `【${item.FLOW_Name}】` : '' }}
                </span> -->
                <div style="margin: 10px 2px">
                  发票金额： {{ item.IN_Fee }}元
                </div>
                <div style="margin: 2px">
                  <el-link type="primary" @click="editExpenseFee(item)">
                    报销金额： {{ item.CEX_ExpenseFee }}元
                  </el-link>
                </div>
                <div style="margin: 10px 2px" v-if="item.PayUserName">
                  垫付人： {{ item.PayUserName }}
                </div>
                <div style="margin: 10px 2px; color: red" v-else>
                  垫付人数据异常
                </div>
                <!-- <div style="margin: 2px">
                  支付金额： {{ item.CEX_PayFee }}元
                </div> -->
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="pagination">
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="expenseReq.pageIndex"
          :total="expenseRes.Total"
          :page-size="expenseReq.pageSize"
          :page-sizes="[12, 16, 20]"
          @size-change="
            (val) => {
              expenseReq.pageSize = val
              getCaseExpenses()
            }
          "
          @current-change="getCaseExpenses()"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getCaseExpenses,
  editExpenseFee,
  deleteCaseExpense,
} from '@/api/core/caseExpense'
import { baseURL, fileRoot } from '@/config'
export default {
  props: ['caseId'],
  data: function () {
    return {
      fileURL: baseURL + fileRoot,

      expenseReq: {
        keyword: '',
        pageIndex: 1,
        pageSize: 12,
      },
      expenseRes: {
        Items: [],
        Total: 0,
      },
    }
  },
  methods: {
    toForm(formId) {
      this.$router.push({
        name: 'formInfoPage',
        query: { formId },
      })
    },
    getCaseExpenses() {
      this.expenseReq.caseId = this.caseId
      getCaseExpenses(this.expenseReq).then(({ data }) => {
        this.expenseRes = data
      })
    },
    editExpenseFee(item) {
      this.$prompt(
        '请输入报销金额，修改报销金额后，需重新统计案件成本',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[0-9]/,
          inputErrorMessage: '请输入数字',
        }
      )
        .then(({ value }) => {
          editExpenseFee({ id: item.CEX_ID, fee: value }).then(() => {
            this.getCaseExpenses()
          })
        })
        .catch(() => {})
    },
    deleteCaseExpense(id) {
      this.$confirm(`确认删除？（删除后，发票将返回“未报销”状态）`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteCaseExpense(id).then(() => {
          this.getCaseExpenses()
        })
      })
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCaseExpenses()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: 100%;
}
.row {
  height: 100%;
}
.col {
  height: 100%;
}
.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}
.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
